<template>
	<view>
        <!-- #ifdef MP-WEIXIN --> 
		<top-nav :inner-title="title" is-show-back="true" is-fixed="false" :navH="navH" :n="n" is-white="bg-white" opacity="1"></top-nav>
         <!-- #endif -->
		<view class="item flex">
            <view class="phone_head" @click="selectNum()">
                <text>+86</text>
               <!-- <icon class="arr_down"></icon> -->
            </view>
            <input class="phone" :value='phone' placeholder="请输入手机号" placeholder-style="color:#bbb" maxlength='11' type='number' @input="phoneEvent"/>
        </view>
        <view class="sunui item" v-if="phone.length == 11">
                <view class="sunui-title">右滑拖动验证</view>
                <sunui-mverify @change="mverify"></sunui-mverify>
        </view>
        <view class="item flex">
            <input class="phone" :value='code' placeholder="请输入验证码" placeholder-style="color:#bbb" maxlength='11' type='number'  @input="codeEvent"/>
            <view class="code" :class="phone.length==11 && verified ? 'green' : ''" @click="getCode()">
                <block v-if="s==0">重新发送</block>
                <block v-else>{{sending? s+'s':'发送验证码'}}</block>
            </view>
        </view>
        <view class="submit_bt flex" :class="isOK ? 'green':''" @click="submit()">绑定</view>
	</view>
</template>

<script>
    import uniFly    from 'unifly';
	import request   from '../../../common/request.js';
	import $api_base from '../../../api/api_base.js';
	import topNav    from '@/template/topnav/index.vue';
	import event     from '../../../common/event.js';
    import cascadeBox from '@/template/cascade/index.vue';
    import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue';
	export default {
		components: { topNav, cascadeBox, sunuiMverify },
		data() {
			return {
				navH: 0,
				n: 0,
				title:'手机号绑定',
                phone:'',
                code:'',
                verified:false,
                sending:false,
                isOK:false,
                s:60,
                activeTimer:null,
                from:''
			}
		},
		onLoad: function (options) {
			this.navH = getApp().globalData.navHeight;
			this.n    = getApp().globalData.n;
            this.from = options.from || '';
            this.verified = false;
			
		},
		methods:{
            mverify: function(e){
                console.log(e);
                this.verified = e.msg;
            },
            phoneEvent: function (e) {
                var self = this;
            	this.phone = e.target.value;
                this.verified = false;
                if(this.s != 60){
                    clearTimeout(self.activeTimer);
                    this.s = 0  
                }
               
                
            },
            codeEvent: function (e) {
                this.code= e.target.value;
                if(this.phone.length==11 && this.code.length == 4){
                    this.isOK = true;
                }
            },
            getCode: function(e){
                if(this.phone.length != 11 || !this.verified) return
                var self = this;
                self.activeTimeEvent(60);
                $api_base.post($api_base.getCode, {mobile:self.phone},1 ).then(function(res){
                    let data = res.data;
                    if(data.ok == 1){
                        self.sending = true;
                    }else{
                        uni.showToast({
                            title:data.msg,
                            duration:1000
                        })
                    }
                });
            },
            activeTimeEvent: function (s) {
                var self = this;
                s--
                self.s = s;
                if(s>0){
                    self.activeTimer = setTimeout(function () {
                        self.activeTimeEvent(self.s);
                    }, 1000); 
                }else{
                    clearTimeout(self.activeTimer);
                }  
            }, 
            submit: function(){
                var self = this;
                if(!this.isOK) return
                $api_base.post($api_base.bindPhone, {mobile:self.phone,code:self.code},1 ).then(function(res){
                    let data = res.data;
                    if(data.ok == 1){
                        uni.showToast({
                            title:'绑定成功',
                            duration:1000
                        })
                        let pages = getCurrentPages();
                        let prevPage = pages[pages.length - 2];
                        getApp().globalData.isRegisted = true;
                        getApp().globalData.userInfo.bind_phone = 1;
                        setTimeout(function() {
                            if(self.from == "index"){
                                prevPage.$vm.backFrom = 'bind_phone';
                                prevPage.$vm.packetShow = false;
                                
                                uni.switchTab({
                                	url: '/pages/index/index'
                                });
                            }else if(self.from == "buy"){
                                prevPage.$vm.fromPage = 'bind_phone';
                                prevPage.$vm.isRegisted = true;
                                self.loadNewPacket(2);
                                uni.navigateBack();
                            }else if(self.from == "mine"){
                                self.loadNewPacket(2);
                                uni.switchTab({
                                	url: '/pages/min-bar/index'
                                });
                            }else{
                                self.loadNewPacket(2);
                                uni.navigateBack();
                            }
                            
                             
                        }, 1000);
                       
                    }else{
                        self.s = 0;
                        clearTimeout(self.activeTimer);
                        uni.showToast({
                            title:'绑定失败',
                            duration:1000
                        })
                    }
                });
            },
            loadNewPacket: function(n){
                var self = this;
                var u_id = uni.getStorageSync('openid');
                var r_type = n;
                var school_id = getApp().globalData.schoolId;
                $api_base.post($api_base.getRedpackeNew,{u_id:u_id,r_type:r_type,school_id:school_id},1).then(function(res) {
                	var data = res.data;
                    if(data.ok==1){
                        // self.loadPacket();
                    }
                })
            },
		}
	}
</script>
<style>
    page{
        background-color: #fff;
    }
</style>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
